import React, {Component} from 'react';
import "./index.css"

export default class Footer extends Component {
  render() {
    return (
      <div className="todo-footer">
        <label>
          <input type="checkbox" checked={ this.props.isSelectAll } onChange={this.checkedAll}/>
        </label>
        <span>
          <span>已完成{
            this.props.toDoList.filter(item => item.done).length
          }</span> / 全部{ this.props.toDoList.length }
        </span>
        <button className="btn btn-danger" onClick={ this.deleteChecked }>清除已完成任务</button>
      </div>
    );
  }

  checkedAll = () => {
    //  点击全选的事件
    this.props.checkAll();
  }
  deleteChecked = () => {
    this.props.deleteChecked();
  }
}